<template>
    <div>
        <br>
        <div class="content" v-for="(item, index) in list" @click="getId(index)">

            <div class="sing">{{ item.name }}</div>
            <div class="play"></div>
            <div class="name">{{ item.ar ? item.ar[0].name : item.song.artists[0].name }}--{{ item.song ? item.song.album.name
                : item.al.name }}</div>
            <!-- 首页歌单 -->
            <!-- <div class="name">{{ item.song.artists[0].name }} - {{ item.song.album.name }}</div> -->
            <!-- 推荐歌单 -->
            <!-- <div  class="name">{{ item.ar[0].name }} - {{ item.al.name }}</div> -->
        </div>
        <!-- <audio autoplay :src="`https://music.163.com/song/media/outer/url?id=${url}.mp3`"></audio> -->
    </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
    props: ['list'],
    data() {
        return {
            //歌曲id 
            url:'',
        }
    },
    methods: {
        ...mapMutations(['updataPlayList','updataplayListIndex']),
        getId(e) {
            console.log(e);
            this.updataplayListIndex(e)
            this.updataPlayList(this.list)
           
        }
    }
}
</script>

<style lang="less" scoped>
.play {
    position: relative;
    float: right;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    border-color: transparent transparent transparent white;
}

.name {
    margin-top: 5px;
}

.content {
    font-size: 15px;
    color: white;
    border-radius: 15px;
    background-color: red;
    padding: 10px;
    margin-bottom: 10px
}
</style>